<!DOCTYPE html>
<html lang="en">
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta http-equiv="Cache-Control" content="no-siteapp">
<head>
    <meta charset="UTF-8">
    <title>时间转换器</title>

    <style>
        .div-d{ float:left;width:200px; height:40px; border:1px solid #ffffff}
        .div-a{ float:left;width:200px; height:80px; border:1px solid #ffffff}
        .div-b{ float:left;width:200px; height:200px; border:1px solid #ffffff}
        .div-c{ float:left;width:500px; height:200px; border:1px solid #ffffff} /*没有边框*/

        .textbox {
            background: #bfcedc;
            border-top: #7f9db9 1px solid;
            border-left: #7f9db9 1px solid;
            border-right: #7f9db9 1px solid;
            border-bottom: #7f9db9 1px solid;
            font-family: "宋体", "verdana", "arial", "helvetica";
            font-size: 25px;
            resize:none
        }

    </style>

    <script type="text/javascript">

{#        $.ajaxSetup({ cache: false })       //不设置ajax缓存#}

        var xmlHttpRequest = null;

        function ajaxRequest(click_id)
        {
            if(window.ActiveXObject) // IE浏览器
            {
                xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
            }
            else if(window.XMLHttpRequest) // 除IE以外的其他浏览器
            {
                xmlHttpRequest = new XMLHttpRequest();
            }
            if(null != xmlHttpRequest)
            {
{#                xmlHttpRequest.setRequestHeader("If-Modified-Since","0");#}

                var radioIndexSelected = null;
                var radio =document.getElementsByName("convert_type");

                var send = null;
                console.info(click_id);
                if (click_id == "btn_num_to_date")
                {
                    send = "num=" + document.getElementById("num1").value;
                }
                else
                {
                     send = "date=" + document.getElementById("date2").value;
                }

                console.info("request:" + send)
                // 准备向服务器发出一个请求

                /*
                 * GET方式向服务器发出一个请求
                 * xmlHttpRequest.open("GET", "AjaxServlet?v1=" + v1 + "&v2=" + v2, true);
                 */

                 /*
                  * POST方式向服务器发出一个请求
                  */
{#                xmlHttpRequest.open("POST", "datetime?now=" + new Date().getTime(), true);#}
                xmlHttpRequest.open("POST", "datetime", true);

                // 当发生状态变化时就调用这个回调函数
                xmlHttpRequest.onreadystatechange = ajaxCallBack;

                // 使用post提交时必须加上下面这行代码
                xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

                // 向服务器发出一个请求
                xmlHttpRequest.send(send);

    {#             console.info("你看我在哪出来~~~");#}
            }
        }

        function ajaxCallBack()
        {
    {#        alert("callback");#}
            if(xmlHttpRequest.readyState == 4)
            {
                if(xmlHttpRequest.status == 200)
                {
                    var content = xmlHttpRequest.responseText;
    {#                alert(typeof content);#}
                    console.info("response:" + content);
    {#                var obj = content.parseJSON(); //由JSON字符串转换为JSON对象#}
                    var objContent = JSON.parse(content); //由JSON字符串转换为JSON对象
    {#                document.getElementById("date").innerHTML = content;    // 返回json字符串不可以这样写#}
                    console.info(objContent.date)
                    console.info(objContent.num)
                    document.getElementById("date1").innerHTML = objContent.date;
                    document.getElementById("num2").innerHTML = objContent.num;
{#                    location.reload();#}
                }
            }
        }
    </script>

</head>
<body>
{#    <input type="button" value="转换" onclick="ajaxRequest()"/><br>#}
{#    <input type="text" id= "num" name = "num" /><br>#}
{#    <textarea rows="3" cols="20" id= "date" name = "date"   style="min-height: 50px;min-width: 200px;max-height: 50px; max-width: 300px;"></textarea>#}
        <div class="div-c">
            整数:<br/>
            <textarea rows="5" cols="30" id="num1" name="num1" class="textbox"></textarea><br/>
        </div>
        <div class="div-b">
            <div class="div-a">
                <div class="div-d"></div>
                <div class="div-d">
{#                    <input type="radio" name="convert_type" id="left2right">---------->>><br>#}
{#                    <input type="radio" name="convert_type" id="right2left"><<<---------<br>#}
                </div>
            </div>
            <div class="div-a"><button button id="btn_num_to_date" style="width:150px;height:30px" onclick="ajaxRequest(this.id)">转换</button></div>
            <div class="div-a"></div>
        </div>
        <div class="div-c">
            时间:<br/>
            <textarea rows="5" cols="30" id="date1" name="date1" class="textbox" readonly="readonly"></textarea><br/>
        </div>

        <HR style="border-width: medium" width="100%" SIZE=3><br>

        <div class="div-c">
            时间:<br/>
            <textarea rows="5" cols="30" id="date2" name="date2" class="textbox"></textarea><br/>
        </div>
        <div class="div-b">
            <div class="div-a">
                <div class="div-d"></div>
                <div class="div-d">
{#                    <input type="radio" name="convert_type" id="left2right">---------->>><br>#}
{#                    <input type="radio" name="convert_type" id="right2left"><<<---------<br>#}
                </div>
            </div>
            <div class="div-a"><button id="btn_date_to_num" style="width:150px;height:30px" onclick="ajaxRequest(this.id)">转换</button></div>
            <div class="div-a"></div>
        </div>
        <div class="div-c">
            整数:<br/>
            <textarea rows="5" cols="30" id="num2" name="num2" class="textbox" readonly="readonly"></textarea><br/>
        </div>

</body>
</html>